<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view class="Router"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      transitionName: ''
    }
  },
  watch: {
    $route () {
      if (this.$router.isleft) {
        this.transitionName = 'slideleft'
      }
      if (this.$router.isright) {
        this.transitionName = 'slideright'
      }
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss">
  $body-bg-color: #f0f0f0;
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #484848;
  }

  // 设置跳转页面过渡动画
  .Router {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 100%;
    background-color: $body-bg-color;
    transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
  }
  .slideleft-enter,
  .slideright-leave-active {
    opacity: 1;
    transform: translate3d(80% 0, 0);
    -webkit-transform: translate3d(80%, 0, 0);
    -moz-transform: translate3d(80%, 0, 0);
  }
  .slideleft-leave-active,
  .slideright-enter {
   opacity: 1;
   transform: translate3d(-80% 0, 0);
   -webkit-transform: translate3d(-80%, 0, 0);
   -moz-transform: translate3d(-80%, 0, 0);
  }
</style>
